<script setup lang="ts">
import { useRouter } from "@tarojs/taro";

import Page from "@/components/common/Page.vue";
import ViewList from "@/components/common/ViewList.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useList from "@/hooks/useList";
import ApiMerchant from "@/api/merchant";

import { TChargeOrder } from "@/global";

const { params } = useRouter<{
  // 商户活动id
  id: `${number}`;
  date: `${string}`;
}>();

// const stateApp = useApp();

// 获取商户收款列表
// const { data: merchantchargeList } = useFetch<[any]>(
//   ApiMerchant.getMerchantActivityChargeList,
//   {
//     defaultParams: {
//       page: 1,
//       size: 1,
//       id: parseInt(params.id),
//       pay_date: params.date,
//     },
//     afterFetch: (res: any) => res?.list,
//   }
// );

const {
  loading,
  list: merchantchargeList,
  nextPage,
} = useList<TChargeOrder>(ApiMerchant.getMerchantActivityChargeList, {
  search: { id: parseInt(params.id), pay_date: params.date },
});

const onScrollToLower = () => {
  nextPage();
};
</script>

<template>
  <Page hiddenHeaderBg>
    <scroll-view
      :scroll-y="true"
      class="h-screen"
      @scrollToLower="onScrollToLower"
    >
      <view class="safe-footer">
        <ViewList
          :loading="loading"
          :is-empty="merchantchargeList.length === 0"
        >
          <ContentBox
            class="mb-4"
            bgColor="bg-[#BB8554]/20"
            hideBgImg
            v-for="item in merchantchargeList"
          >
            <view class="flex justify-between items-center p-4">
              <view class="text-sm">{{ item?.pay_time }}</view>

              <view class="text-sm text-[888]">
                ¥{{ (item?.pay_price / 100).toFixed(2) }}
              </view>

              <view class="text-sm text-[888]">
                {{ 100 - item?.receipt_percent }}%
              </view>

              <view class="text-sm text-[red]">
                ¥{{ (item?.merchant_price / 100).toFixed(2) }}
              </view>
            </view>
          </ContentBox>
        </ViewList>
      </view>
    </scroll-view>
  </Page>
</template>
